<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>vue.js</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <div id="app">
        <span v-if="seen">
            reversedMessage:{{reversedMessage}}<br>
            firstWordToUpper:{{firstWordToUpper}}
        </span>
        <p>{{message}}</p>
        <button @click="toMessageUpperCase">toUpperCase</button><br>
        <button @click="toMessageLowerCase">toLowerCase</button><br>
        <button @click="display">显示</button>
        <input v-model="message">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello world',
            seen:false
        },
        computed:{
            reversedMessage:function () {
                return this.message.split('').reverse().join('')
            },
            firstWordToUpper:function () {
                var mes = this.message.split(' ')
                var finalStr=''
                for(var m of mes){
                    var s = m.split('')[0].toUpperCase()+m.substring(1,m.length)
                    finalStr +=s+' ';
                }
                return finalStr;
            }
        },
        methods:{
            toMessageUpperCase:function () {
                this.message=this.message.toUpperCase()
            },
            toMessageLowerCase:function () {
                this.message=this.message.toLowerCase()
            },
            display:function () {
                this.seen = true
            }
        }
    })
</script>
</html>